import React, { Component, createRef } from 'react';

class NoControl extends Component {

    // 创建ref容器
    username = createRef();
    pwd = createRef();


    //创建方法
    login = () => {
        // console.log(this);
        //获取账号
        let username = this.username.current.value;
        //获取密码
        let pwd = this.pwd.current.value;

        alert(`账号是${username},密码是${pwd}`);
    }

    //重置表单
    reset = ()=>{
        this.username.current.value = "";
        this.pwd.current.value = "";
    }



    render() {
        return (
            <div style={{width:500,margin:"20px auto"}}>
                <h1>非受控组件</h1>
                <input ref={this.username} type="text" placeholder='请输入账号'/><br /><br />
                <input ref={this.pwd} type="text" placeholder='请输入密码' /><br /><br />
                <button onClick={this.login}>登录</button>
                <button onClick={this.reset}>重置</button>
            </div>
        );
    }
}

export default NoControl;